import React, { Component } from "react";

import "./css/index.css";

import Film from "./Film";
import Cinema from "./Cinema";
import Center from "./Center";

export default class App extends Component {
  state = {
    buttons: [
      {
        id: 1,
        name: "电影",
      },
      {
        id: 2,
        name: "影院",
      },
      {
        id: 3,
        name: "我的",
      },
    ],
    currentIndex: 0,
  };
  render() {
    return (
      <div>
        {/* {this.state.currentIndex === 0 && <Film></Film>}
        {this.state.currentIndex === 1 && <Cinema></Cinema>}
        {this.state.currentIndex === 2 && <Center></Center>} */}

        {/* 支持函数表达式 */}
        {this.whichComponent()}
        <ul className="navbar">
          {this.state.buttons.map((item, index) => {
            return (
              <li
                key={item.id}
                className={this.state.currentIndex === index ? "active" : ""}
                onClick={() => this.handleClick(index)}
              >
                {item.name}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

  handleClick = (index) => {
    this.setState({ currentIndex: index });
  };

  whichComponent = () => {
    switch (this.state.currentIndex) {
      case 0:
        return <Film></Film>;
      case 1:
        return <Cinema></Cinema>;
      case 2:
        return <Center></Center>;
      default:
        return null;
    }
  };
}
